<template>
	<view class="fenxianginfo">
		<view class="fenxiangItembg" @click="closeFx" @touchmove.stop.prevent></view>
		<view class="fenxiangItem " :class="[showFx==false? 'showFxTop':'']">

			<view v-if="showFx==false">
				<view class="fenxiangItemBgBox animation-slide-bottom"
					style="animation-duration: 0.2s;background: transparent!important;">
					<view class="posterImg">
						<image :src="this.$util.imgChanges(posterImg)" mode="widthFix" style="margin: 0 auto;">
						</image>
					</view>
				</view>
				<!-- #ifdef H5 -->
				<view class="fxTexts" style="font-size: 35rpx;color: #FFFFFF;">长按保存图片</view>
				<!-- #endif -->
				<!-- #ifdef MP-WEIXIN -->
				<view class="fxTexts"
					style="font-size: 35rpx;color: #FFFFFF;width: 50%;height: 80rpx;background-image: linear-gradient(45deg, #FF6744, #FD3B5C);border-radius: 20rpx;line-height: 80rpx;padding-top: 0;margin: 30rpx auto;"
					@tap="saveImgs">点击保存图片</view>
				<!-- #endif -->
			</view>

			<view class="fenxiangItemBgBox animation-slide-bottom" style="animation-duration: 0.2s;"
				v-if="showFx==true">
				<view class="fxNr ">
					<!-- #ifdef H5 -->
					<view @click="wxShare">
						<view class="fxIcons">
							<image :src="staticImgUrl+'setting/fxhy.png'" mode=""></image>
						</view>
						<view class="fxTexts">微信</view>
					</view>
					<!-- #endif -->
					<!-- #ifdef MP-WEIXIN -->
					<view>
						<button open-type="share">
							<view class="fxIcons">
								<image :src="staticImgUrl+'setting/fxhy.png'" mode=""></image>
							</view>
							<view class="fxTexts">微信</view>
						</button>
					</view>
					<!-- #endif -->
					<!-- #ifdef H5 -->
					<view @click="haiBao()" v-if="sku_id || site_id || iid">
						<view class="fxIcons">
							<image :src="staticImgUrl+'setting/fxpyq.png'" mode=""></image>
						</view>
						<view class="fxTexts">生成分享海报</view>
					</view>
					<!-- #endif -->
					<!-- #ifdef H5 -->
					<view @click="copyLink">
						<view class="fxIcons">
							<image :src="staticImgUrl+'setting/fzlj.png'" mode=""></image>
						</view>
						<view class="fxTexts">复制链接</view>
					</view>
					<!-- #endif -->
				</view>
				<view class="fgsx"></view>
				<view class="qxbtn" @click="closeFx">取消</view>
			</view>
		</view>
	</view>
</template>

<script>
import {
	mapGetters,
	mapMutations
} from 'vuex'
export default {
	data() {
		return {
			showFx: true,
			posterImg: ''
		}
	},
	props: {
		sku_id: {
			type: [String, Number],
			default: ''
		},
		iid: {
			type: [String, Number],
			default: ''
		},
		site_id: {
			type: [String, Number],
			default: ''
		},
		// 判断详情页类型  普通0，秒杀1，拼团2，商铺3
		type: {
			type: [String, Number],
			default: 0
		}
	},
	computed: {
		...mapGetters(['userInfo'])
	},
	methods: {
		closeFx() {
			this.$emit('closeFx', false)
		},
		wxShare() {
			console.log('wxShare')
			this.$util.tip('~右上角···分享好友吧~')
			this.closeFx()
		},
		copyLink() {
			var urlnews = location.href.indexOf('?') == -1 ? '?' : '&'
			this.$util.copyText(location.href + urlnews + 'source_member=' + this.userInfo.member_id).then(res => {
				this.$util.tip(res.data)
				this.closeFx()
			}).catch(res => {
				this.$util.tip(res.data)
			})
		},
		errTip(msg) {
			console.log('errmsg=>', msg)
			this.$util.tip('~暂未开放，敬请期待~')
			setTimeout(() => {
				uni.hideLoading()
			}, 500)
		},
		haiBao() {
			uni.showLoading({
				title: '生成中请稍等'
			})
			let routes = getCurrentPages() // 获取当前打开过的页面路由数组
			let curRoute = routes[routes.length - 1].route // 获取当前页面路由
			let curParam = routes[routes.length - 1].options // 获取路由参数
			let qrcode_param = {}
			if (this.sku_id) qrcode_param.sku_id = this.sku_id
			if (this.iid) qrcode_param.id = this.iid
			if (this.site_id) qrcode_param.site_id = this.site_id
			if (this.userInfo.member_id) qrcode_param.source_member = this.userInfo.member_id
			console.log('qrcode_param=>', qrcode_param)

			if (this.type == 0) {
				// #ifdef H5
				this.$Apis.goodsposter({
					app_type: 'h5',
					app_type_name: 'H5',
					page: curRoute,
					qrcode_param: JSON.stringify(qrcode_param)
				}).then(res => {
					console.log('res', res)
					this.posterImg = res.path
					this.showFx = !this.showFx
					uni.hideLoading()
				}).catch(err => {
					this.errTip(err.message)
				})
				// #endif
				// #ifdef MP-WEIXIN
				this.$Apis.goodsposter({
					page: curRoute,
					qrcode_param: JSON.stringify(qrcode_param)
				}).then(res => {
					console.log('res', res)
					this.posterImg = res.path
					this.showFx = !this.showFx
					uni.hideLoading()
				}).catch(err => {
					this.errTip(err.message)
				})
				// #endif
			} else if (this.type == 1) {
				// #ifdef H5
				this.$Apis.seckillgoodsposter({
					app_type: 'h5',
					app_type_name: 'H5',
					page: curRoute,
					qrcode_param: JSON.stringify(qrcode_param)
				}).then(res => {
					console.log('res', res)
					this.posterImg = res.path
					this.showFx = !this.showFx
					uni.hideLoading()
				}).catch(err => {
					this.errTip(err.message)
				})
				// #endif
				// #ifdef MP-WEIXIN
				this.$Apis.seckillgoodsposter({
					page: curRoute,
					qrcode_param: JSON.stringify(qrcode_param)
				}).then(res => {
					console.log('res', res)
					this.posterImg = res.path
					this.showFx = !this.showFx
					uni.hideLoading()
				}).catch(err => {
					this.errTip(err.message)
				})
				// #endif
			} else if (this.type == 2) {
				// #ifdef H5
				this.$Apis.pintuangoodsposter({
					app_type: 'h5',
					app_type_name: 'H5',
					page: curRoute,
					qrcode_param: JSON.stringify(qrcode_param)
				}).then(res => {
					console.log('res', res)
					this.posterImg = res.path
					this.showFx = !this.showFx
					uni.hideLoading()
				}).catch(err => {
					this.errTip(err.message)
				})
				// #endif
				// #ifdef MP-WEIXIN
				this.$Apis.pintuangoodsposter({
					page: curRoute,
					qrcode_param: JSON.stringify(qrcode_param)
				}).then(res => {
					console.log('res', res)
					this.posterImg = res.path
					this.showFx = !this.showFx
					uni.hideLoading()
				}).catch(err => {
					this.errTip(err.message)
				})
				// #endif
			} else if (this.type == 3) {
				// #ifdef H5
				this.$Apis.shopposter({
					app_type: 'h5',
					app_type_name: 'H5',
					page: curRoute,
					qrcode_param: JSON.stringify(qrcode_param)
				}).then(res => {
					this.posterImg = res.path
					this.showFx = !this.showFx
					uni.hideLoading()
				}).catch(err => {
					this.errTip(err.message)
				})
				// #endif
				// #ifdef MP-WEIXIN
				this.$Apis.shopposter({
					page: curRoute,
					qrcode_param: JSON.stringify(qrcode_param)
				}).then(res => {
					this.posterImg = res.path
					this.showFx = !this.showFx
					uni.hideLoading()
				}).catch(err => {
					this.errTip(err.message)
				})
				// #endif
			}

			// if (this.site_id != '') {
			// 	// #ifdef H5
			// 	this.$Apis.shopposter({
			// 		app_type: 'h5',
			// 		app_type_name: 'H5',
			// 		page: curRoute,
			// 		qrcode_param: JSON.stringify(qrcode_param)
			// 	}).then(res => {
			// 		this.posterImg = res.path
			// 		this.showFx = !this.showFx
			// 		uni.hideLoading()
			// 	}).catch(err => {
			// 		this.$Utils.tip(err.message)
			// 		uni.hideLoading()
			// 	})
			// 	// #endif
			// 	// #ifdef MP-WEIXIN
			// 	this.$Apis.shopposter({
			// 		page: curRoute,
			// 		qrcode_param: JSON.stringify(qrcode_param)
			// 	}).then(res => {
			// 		this.posterImg = res.path
			// 		this.showFx = !this.showFx
			// 		uni.hideLoading()
			// 	}).catch(err => {
			// 		this.$Utils.tip(err.message)
			// 		uni.hideLoading()
			// 	})
			// 	// #endif
			// } else {
			// 	// #ifdef H5
			// 	this.$Apis.goodsposter({
			// 		app_type: 'h5',
			// 		app_type_name: 'H5',
			// 		page: curRoute,
			// 		qrcode_param: JSON.stringify(qrcode_param)
			// 	}).then(res => {
			// 		console.log("res", res)
			// 		this.posterImg = res.path
			// 		this.showFx = !this.showFx
			// 		uni.hideLoading()
			// 	}).catch(err => {
			// 		this.$Utils.tip(err.message)
			// 		uni.hideLoading()
			// 	})
			// 	// #endif
			// 	// #ifdef MP-WEIXIN
			// 	this.$Apis.goodsposter({
			// 		page: curRoute,
			// 		qrcode_param: JSON.stringify(qrcode_param)
			// 	}).then(res => {
			// 		console.log("res", res)
			// 		this.posterImg = res.path
			// 		this.showFx = !this.showFx
			// 		uni.hideLoading()
			// 	}).catch(err => {
			// 		this.$Utils.tip(err.message)
			// 		uni.hideLoading()
			// 	})
			// 	// #endif

			// }
		},
		saveImgs() {
			let url = this.$util.imgChanges(this.posterImg)
			console.log('url', url)
			uni.downloadFile({
				url,
				success: (res) => {
					console.log('res', res)
					if (res.statusCode === 200) {
						uni.saveImageToPhotosAlbum({
							filePath: res.tempFilePath,
							success: () => {
								this.$util.tip('保存成功')
								this.showFx = false
								this.closeFx()
							},
							fail: () => {
								this.$util.tip('保存失败')
							}
						})
					}
				}
			})
		}
	},
	mounted() {}
}
</script>

<style lang="scss" scoped>
	.fenxianginfo {
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 999999;
	}

	.fenxiangItembg {
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		left: 0;
		background: rgba(0, 0, 0, 0.5);
		z-index: 99999;
	}

	.fenxiangItem {
		position: fixed;
		bottom: -6%;
		left: 50%;
		transform: translate(-50%, -50%);
		z-index: 999999;
		width: 690rpx;
	}

	.fenxiangItemBgBox {
		width: 100%;
		height: auto;
		background: #FFFFFF;
		border-radius: 25rpx;
		z-index: 9999999;
	}

	.fxNr {
		display: flex;
		align-items: center;
		justify-content: space-around;
		padding-top: 40rpx;
	}

	.fxIcons {
		width: 80rpx;
		height: 80rpx;
		margin: 0 auto;
	}

	.fxIcons image {
		width: 100%;
		height: 100%;
	}

	.fxTexts {
		text-align: center;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #222222;
		padding-top: 12rpx;
	}

	.fgsx {
		width: 100%;
		height: 1rpx;
		background: #EEEEEE;
		margin-top: 45rpx;
	}

	.qxbtn {
		width: 100%;
		height: 100rpx;
		line-height: 100rpx;
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #FF3939;
		text-align: center;
	}

	button {
		margin: 0 !important;
		padding: 0 !important;
		border: none !important;
		line-height: 1 !important;
		background: transparent !important;
	}

	button::after {
		border: none !important;
	}

	.posterImg {
		width: 90%;
		height: 1000rpx;
		margin: 0 auto;
		border-radius: 20rpx;
	}

	.posterImg image {
		border-radius: 20rpx;
	}

	.showFxTop {
		top: 45% !important;
	}
</style>
